<template>
    <div class="details">
        <div class="nav">
            哔哩哔哩漫画
            <span class="iconfont icon-fanhui" @click.stop="back()"></span>
        </div>
        <div v-if="ComicDetail">
            <div class="details-img" v-if="ComicDetail.horizontal_cover">
                <van-image
                    width="100vw"
                    height="56.3vw"
                    fit="cover"
                    :src="`${ComicDetail.horizontal_cover}@400w.jpg`"
                />
                <div class="content-img">
                    <h3>{{ ComicDetail.title }}</h3>
                    <p>
                        <span v-for="author in ComicDetail.author_name" :key="author"
                            >{{ author }} 、
                        </span>
                        <span v-for="styles in ComicDetail.styles" :key="styles">
                            · {{ styles }}</span
                        >
                        · MC{{ ComicDetail.id }}
                    </p>
                </div>
            </div>
            <van-loading v-else size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
            <div class="content" v-if="reverseSection.length > 0">
                <div class="comic-icon">
                    <div class="icon" @click.stop="Collect(id)">
                        <span v-if="collects"><b class="iconfont icon-xingxing"></b> 追漫</span>
                        <span v-else><b class="iconfont icon-xingxing1"></b> 已追</span>
                    </div>
                    <button v-if="lift">
                        <ul>
                            <router-link
                                tag="li"
                                :to="{
                                    name: 'chapters',
                                    params: { id: String(idlist[0]), idlist, comicid: id },
                                }"
                            >
                                看第{{
                                    ep_list.length == 0
                                        ? sectionList[0].short_title
                                        : reverseSection[
                                              idlist.indexOf(Number(ep_list[ep_list.length - 1]))
                                          ].short_title
                                }}
                                话
                            </router-link>
                        </ul>
                    </button>
                    <button v-else>
                        <ul>
                            <router-link
                                tag="li"
                                :to="{
                                    name: 'chapters',
                                    params: {
                                        id: String(idlist[idlist.length - 1]),
                                        idlist,
                                        comicid: id,
                                    },
                                }"
                            >
                                看第{{
                                    ep_list.length == 0
                                        ? reverseSection[idlist.length - 1].short_title
                                        : reverseSection[
                                              idlist.indexOf(Number(ep_list[ep_list.length - 1]))
                                          ].short_title
                                }}
                                话
                            </router-link>
                        </ul>
                    </button>
                </div>
                <div class="comic-deatil">
                    <h2 v-if="ComicDetail.last_ord == ComicDetail.total">已完结</h2>
                    <h2 v-else>连载中</h2>
                    <p v-if="showp" @click="showp = !showp">
                        {{ ComicDetail.classic_lines
                        }}<span v-if="showp" class="iconfont icon-xia"></span>
                    </p>
                    <h3 v-else>{{ ComicDetail.classic_lines }}</h3>
                </div>
                <div class="section" v-if="lift">
                    <h3>
                        全部章节 ({{ ComicDetail.ep_list.length }})
                        <span
                            v-if="lift"
                            class="iconfont icon-shengjiangxu-jiang"
                            @click.stop="setlift"
                            >升序</span
                        >
                        <span v-else class="iconfont icon-shengjiangxu-jiang" @click.stop="setlift"
                            >降序</span
                        >
                    </h3>
                    <ul v-if="showSection">
                        <router-link
                            tag="li"
                            :class="{ active: ep_list.includes(String(title.id)) }"
                            :to="{
                                name: 'chapters',
                                params: {
                                    id: String(title.id),
                                    idlist,
                                    locked: title.is_locked,
                                    comicid: id,
                                },
                            }"
                            v-for="title in sectionList"
                            :key="title.id"
                        >
                            {{ title.short_title }}
                            <div class="locked" v-if="title.is_locked">
                                <img src="../assets/images/locked.png" alt="" />
                            </div>
                        </router-link>
                        <li
                            class="dot"
                            v-if="idlist.length >= 8"
                            @click.stop="showSection = !showSection"
                        >
                            . . .
                        </li>
                    </ul>
                    <ul v-else>
                        <router-link
                            tag="li"
                            :class="{ active: ep_list.includes(String(title.id)) }"
                            :to="{
                                name: 'chapters',
                                params: {
                                    id: String(title.id),
                                    idlist,
                                    locked: title.is_locked,
                                    comicid: id,
                                },
                            }"
                            v-for="title in sectionList"
                            :key="title.id"
                        >
                            {{ title.short_title }}
                            <div class="locked" v-if="title.is_locked">
                                <img src="../assets/images/locked.png" alt="" />
                            </div>
                        </router-link>
                    </ul>
                </div>
                <div class="section" v-else>
                    <h3>
                        全部章节 ({{ ComicDetail.ep_list.length }})
                        <span
                            v-if="lift"
                            class="iconfont icon-shengjiangxu-jiang"
                            @click.stop="setlift"
                            >升序</span
                        >
                        <span v-else class="iconfont icon-shengjiangxu-jiang" @click.stop="setlift"
                            >降序</span
                        >
                    </h3>
                    <ul v-if="showSection">
                        <router-link
                            tag="li"
                            :class="{ active: ep_list.includes(String(title.id)) }"
                            :to="{
                                name: 'chapters',
                                params: {
                                    id: String(title.id),
                                    idlist,
                                    locked: title.is_locked,
                                    comicid: id,
                                },
                            }"
                            v-for="title in sectionList"
                            :key="title.id"
                        >
                            {{ title.short_title }}
                            <div class="locked" v-if="title.is_locked">
                                <img src="../assets/images/locked.png" alt="" />
                            </div>
                        </router-link>
                        <li class="dot" @click.stop="showSection = !showSection">. . .</li>
                    </ul>
                    <ul v-else>
                        <router-link
                            tag="li"
                            :class="{ active: ep_list.includes(String(title.id)) }"
                            :to="{
                                name: 'chapters',
                                params: {
                                    id: String(title.id),
                                    idlist,
                                    locked: title.is_locked,
                                    comicid: id,
                                },
                            }"
                            v-for="title in sectionList"
                            :key="title.id"
                        >
                            {{ title.short_title }}
                            <div class="locked" v-if="title.is_locked">
                                <img src="../assets/images/locked.png" alt="" />
                            </div>
                        </router-link>
                    </ul>
                </div>
                <div class="comment-box" v-if="ReplyMain">
                    <h2>讨论区 ({{ ReplyMainLength }})</h2>
                    <div class="comment" :style="{ width: `${this.page * 4 * 80}%` }">
                        <div
                            class="box"
                            v-for="comment in ReplyMain"
                            :key="comment.mid + comment.count"
                        >
                            <div class="top">
                                <img :src="comment.member.avatar" alt="" />
                                <div class="top-comment">
                                    <h3>{{ comment.member.uname }}</h3>
                                    <span>2 年前 #</span>
                                </div>
                            </div>
                            <p>{{ comment.content.message }}</p>
                        </div>
                        <router-link :to="`/discussion/${id}`" tag="div" class="moreReplyMain">
                            漫画讨论区
                        </router-link>
                    </div>
                </div>
                <div class="recommend" v-if="Recommend">
                    <h2>猜你喜欢</h2>
                    <ul v-if="Recommend.length > 0">
                        <router-link
                            tag="li"
                            :to="`/details/${item.season_id || item.id}`"
                            v-for="item in Recommend"
                            :key="item.season_id || item.id"
                        >
                            <van-image
                                width="27.5vw"
                                height="36.5vw"
                                lazy-load
                                fit="cover"
                                :src="`${item.vertical_cover}@100w.jpg`"
                                @click.stop="changeRecommend(item.id)"
                            />
                            <h3>{{ item.title }}</h3>
                            <p v-if="item.last_ord == item.total">[完结]共{{ item.last_ord }}话</p>
                            <p v-else>更新至{{ item.last_short_title }}话</p>
                        </router-link>
                    </ul>
                </div>
            </div>
        </div>
        <div v-else>
            <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
    </div>
</template>

<script>
import _ from "lodash";
import { mapMutations } from "vuex";
import router from "@/router";
export default {
    props: {
        id: {
            type: String,
            define: 0,
        },
    },
    data() {
        return {
            ComicDetail: [], //漫画详情
            reverseSection: [], //章节 从前到后
            newReverseSection: [],
            Section: [], //章节 从后到前
            newSection: [],
            ReplyMain: [], //评论
            Recommend: [], //相关漫画
            idlist: [], //id的列表
            showp: true,
            showSection: true, //章节列表 true 显示一部分 false 显示全部
            lift: true, //升降 true 升 false 降
            page: 1,
            historys: "",
            ReplyMainLength: 0, //讨论区的条数
            read: false, //true 已阅读
            ep_list: [],
        };
    },
    computed: {
        collects() {
            if (this.historys == this.id) {
                return false;
            } else {
                return true;
            }
        },
        sectionList() {
            if (this.showSection && this.lift) {
                return this.newReverseSection;
            } else if (this.showSection && !this.lift) {
                return this.newSection;
            } else if (!this.showSection && this.lift) {
                return this.reverseSection;
            } else {
                return this.Section;
            }
        },
    },
    created() {
        this.getComicDetail();
        this.getReplyMain();
        this.getRecommend();

        this.readLog();
        this.historys = localStorage.getItem("collect");
        if (!this.historys) return;
        this.historys = JSON.parse(this.historys).filter((item) => {
            return item == this.id;
        });
    },
    beforeUpdate() {
        _.debounce(this.changeRecommend, 100);
    },
    methods: {
        async getComicDetail(id = this.id) {
            await this.axios.get(`ComicDetail?comicId=${id}`).then((res) => {
                this.ComicDetail = res;
                this.Section = [...res.ep_list];
                this.newSection = [...res.ep_list].splice(0, 7);
                this.reverseSection = [...res.ep_list].reverse();
                this.newReverseSection = [...res.ep_list].reverse().splice(0, 7);

                for (let i = 0; i < this.reverseSection.length; i++) {
                    this.idlist.push(this.reverseSection[i].id);
                }
            });
        },
        async getReplyMain(id = this.id, offset = 4) {
            await this.axios.get(`ReplyMain?oid=${id}&ps=${offset}`).then((res) => {
                this.ReplyMainLength = res.cursor.all_count;
                this.ReplyMain = res.replies;
            });
        },
        async getRecommend(id = this.id) {
            await this.axios.get(`MoreRecommend?comicId=${id}`).then((res) => {
                this.Recommend = res.recommend_comics.splice(0, 6);
            });
        },
        back() {
            router.back();
        },
        changeRecommend(id) {
            this.ComicDetail = null;
            this.getComicDetail(id);
            this.getReplyMain(id);
            this.getRecommend(id);
            this.gotop();
        },
        //返回顶部
        gotop() {
            let top = document.documentElement.scrollTop || document.body.scrollTop;
            // 实现滚动效果
            const timeTop = setInterval(() => {
                document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
                if (top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);
        },
        ...mapMutations(["addCollect"]),
        ...mapMutations(["delCollect"]),

        Collect(id) {
            if (this.collects) {
                this.addCollect(id);
                this.historys = "";
                this.$dialog.alert({
                    message: "追漫成功",
                });
            } else {
                this.delCollect(id);
                this.$dialog.alert({
                    message: "已取消追漫",
                });
            }
            this.historys = localStorage.getItem("collect");
            if (!this.historys) return;
            this.historys = JSON.parse(this.historys).filter((item) => {
                return item == this.id;
            });
        },
        setlift() {
            this.lift = !this.lift;
            if (!this.lift) {
                for (let i = 0; i < this.reverseSection.length; i++) {
                    _.uniq(this.idlist.concat(this.reverseSection[i].id));
                }
            } else {
                for (let i = 0; i < this.Section.length; i++) {
                    _.uniq(this.idlist.concat(this.Section[i].id));
                }
            }
        },
        //阅读章节记录
        readLog() {
            let readHistor = JSON.parse(localStorage.getItem("readLog"));
            if (!readHistor) {
                return;
            }
            readHistor.forEach((v) => {
                if (v.comicid == this.id) {
                    this.ep_list = _.uniq(v.ep_list);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.details {
    position: relative;
    .nav {
        text-align: center;
        position: relative;
        font-size: 16px;
        line-height: 45px;
        span {
            position: absolute;
            left: 12px;
            top: 0;
            bottom: 0;
        }
    }
    .details-img {
        position: relative;
        color: #fff;
        .content-img {
            position: absolute;
            bottom: 10px;
            padding: 0px 12px;
            h3 {
                font-size: 20px;
                margin-bottom: 8px;
            }
            p {
                font-size: 12px;
            }
        }
    }
    .content {
        margin: 16px;
        .comic-icon {
            display: flex;
            justify-content: space-between;
            margin: 16px 0;
            line-height: 44px;
            .icon {
                font-size: 18px;
                color: #212121;
                b {
                    font-size: 30px;
                    vertical-align: middle;
                }
            }
            button {
                width: 60%;
                font-size: 14px;
                color: #fff;
                background: #fb7299;
                border: 0;
                border-radius: 25px;
                .btn {
                    color: #fff;
                }
            }
        }
        .comic-deatil {
            h2 {
                font-size: 16px;
                padding-bottom: 8px;
            }
            h3 {
                font-size: 12px;
                color: #999;
            }
            p {
                font-size: 12px;
                color: #999;
                display: -webkit-box;
                -webkit-box-orient: vertical; //设置方向
                -webkit-line-clamp: 2; //设置超过为省略号的行数
                overflow: hidden;
                position: relative;
                span {
                    position: absolute;
                    right: 0;
                    top: 15px;
                }
            }
        }
        .section {
            h3 {
                display: flex;
                justify-content: space-between;
                margin: 23px 0 8px 0;
                font-size: 16px;
                color: #212121;
                span {
                    font-size: 12px;
                    color: #505050;
                }
            }
            ul {
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 22%;
                    font-size: 14px;
                    text-align: center;
                    border: 1px solid #eee;
                    margin: 4px 4px;
                    line-height: 38px;
                }
                .active {
                    background: #c4eaf9;
                }
                .locked {
                    color: red;
                    position: relative;
                    img {
                        position: absolute;
                        top: -38px;
                        right: 0;
                        width: 20px;
                    }
                }
                .dot {
                    font-size: 20px;
                }
            }
        }
        .comment-box {
            overflow: auto;
            &::-webkit-scrollbar {
                width: 0 !important;
            }
            h2 {
                font-size: 16px;
                margin: 16px 0;
            }
            .comment {
                display: flex;
                .box {
                    overflow: hidden;
                    width: 65vw;
                    height: 118px;
                    margin-right: 12px;
                    border: 1px solid #eee;
                    padding: 12px;
                    .top {
                        position: relative;
                        height: 35px;
                        img {
                            width: 32px;
                            display: inline-block;
                            border-radius: 50%;
                            margin-right: 5px;
                        }
                        .top-comment {
                            position: absolute;
                            // width: 100%;
                            display: inline-block;
                            font-size: 12px;
                            h3 {
                                color: #757575;
                            }
                            span {
                                color: #999;
                            }
                        }
                    }
                    p {
                        font-size: 12px;
                        margin-top: 10px;
                        padding-right: 12px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical; //设置方向
                        -webkit-line-clamp: 3; //设置超过为省略号的行数
                        overflow: hidden;
                    }
                }
                .moreReplyMain {
                    width: 40vw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border: 1px solid #eee;
                }
            }
        }
        .recommend {
            margin: 16px 0;
            h2 {
                font-size: 16px;
                line-height: 40px;
            }
            ul {
                display: flex;
                flex-wrap: wrap;
                li {
                    width: 30%;
                    padding: 8px 5px;
                    img {
                        width: 100%;
                        height: 137px;
                    }
                    h3 {
                        font-size: 14px;
                        color: #222;
                        // margin-top: 8px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    p {
                        font-size: 12px;
                        color: #999;
                    }
                }
            }
        }
    }
    .refresh {
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: -100px;
        font-size: 24px;
        color: red;
    }
}
</style>
